<template>
  <div>
    <label>{{ label }}</label>
    <slot></slot>
    <p v-if="errMessage">{{ errMessage }}</p>
  </div>
</template>

<script>
  import AsyncValidator from 'async-validator'

  export default {
    name: 'LgFormItem',
    inject: ['form'],
    props: {
      label: {
        type: String
      },
      prop: {
        type: String
      }
    },
    mounted () {
      this.$on('validate', () => {
        this.validate()
      })
    },
    data () {
      return {
        errMessage: ''
      }
    },
    methods: {
      validate () {
        if (!this.prop) return
        const value = this.form.model[this.prop]
        const rules = this.form.rules[this.prop]

        const descriptor = { [this.prop]: rules }
        const validator = new AsyncValidator(descriptor)
        return validator.validate({ [this.prop]: value }, errors => {
          if (errors) {
            this.errMessage = errors[0].message
          } else {
            this.errMessage = ''
          }
        })
      }
    }
  }
</script>

<style>
</style>